<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息查询</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .demo-login-container{width: 1000px;  }
</style>
<script type="text/html" id="toolbarDemo">
    <form class="layui-form layui-row layui-col-space16">
        <div class="demo-login-container" >
            <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="id"  value="" placeholder="请输入编号" class="layui-input" lay-affix="clear">
            </div>


            <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name"  value="" placeholder="请输入名称" class="layui-input" lay-affix="clear">
            </div>




            <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="hiredate"  readonly placeholder="请选择日期" class="layui-input demo-table-search-date">
            </div>


            <div class="layui-input-wrap" style="display: inline-block;width: 150px">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-login-qq"></i>
                </div>
                <select name="sex"  lay-search>
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>



            <button class="layui-btn " lay-submit lay-filter="demo-table-search">查询</button>
            <button class="layui-btn " id="dropdownButton">
                操作
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>

        </div>

    </form>

</script>

<table class="layui-hide" id="ID-table-demo-search"></table>
</body>
<script>
    layui.use(function (){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: 'queryAllStudentByPage', // 此处为静态模拟数据，实际使用时需换成真实接口
            limits:[5,10,15],
            toolbar: '#toolbarDemo',
            cols: [[
                {type: 'checkbox', title: '😊', fixed: true}, // 单选框
                {field:'id', title: '编号', sort: true, fixed: true,align:"center"},
                {field:'name', title: '学生名称',align:"center"},
                {field:'age', title: '学生年龄',align:"center"},
                {field:'sex', title: '学生性别',sort: true,align:"center" },
                {field:'tel', title: '学生电话',align:"center"},
                {field:'studentclass', title: '学生班级',align:"center"},
                {field:'address', title: '家庭住址'},
                {field:'email', title: '学生邮箱'}
            ]],
            done:function (){
                var id = this.id;

                //下拉渲染
                dropdown.render({
                    elem: '#dropdownButton',
                    data: [{
                        id: 'add',
                        title: '添加'
                    },{
                        id: 'update',
                        title: '修改'
                    },{
                        id: 'delete',
                        title: '删除'
                    }],
                    click:function (obj){
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch(obj.id){
                            case 'add':
                                layer.open({
                                    title: '添加学生',
                                    type: 2,
                                    area: ['75%','90%'],
                                    content: '/add.html',
                                    skin:"layui-layer-molv",
                                    anim:2

                                });
                                break;
                            case 'update':
                                if(data.length !== 1) return layer.msg('请选择一行');
                                var index = layer.open({
                                    title: '修改学生信息',
                                    type: 2,
                                    area: ['70%','85%'],
                                    content: '/update.html',
                                    skin:"layui-layer-molv",
                                    anim:2,
                                    success:function (dom,index){
                                        var iframeWindow = window['layui-layer-iframe'+ index]
                                        iframeWindow.edite(data);
                                    }
                                });
                                break;
                            case 'delete':
                                if(data.length === 0){
                                    return layer.msg('请选择一行');
                                }




                                var ids = [];
                                for(var i = 0;i<data.length;i++){
                                    var idd = data[i].id;
                                    ids.push(idd)
                                }
                                layer.confirm('您确定要删除<font color="red">'+ids.length+"</font>条记录吗？", {icon: 3}, function(){
                                    $.ajax({
                                        type : 'post',
                                        url : "deleteTeacherByIds",
                                        dataType : 'json',
                                        contentType : 'application/json',
                                        data : JSON.stringify(ids),
                                        success : function (count) { // 返回的RequestResult的json对象
                                            if(count>0){
                                                layer.msg('删除成功...');
                                                table.reload("ID-table-demo-search")
                                            }
                                        },
                                    });
                                }, function(){
                                    layer.msg('取消删除',{icon: 1});
                                });
                                break;
                        }

                    }
                })
            },
            page: true,
            height: 550
        });
        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段

            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                where:field,
                done:function (){
                    laydate.render({
                        elem: '.demo-table-search-date'
                    });
                }
            })

            return false; // 阻止默认 form 跳转
        });

    })
</script>

</html>